/*
 * @Author: kanglang
 * @Date: 2020-11-23 11:38:07
 * @LastEditors: kanglang
 * @LastEditTime: 2021-08-03 19:02:31
 * @Description: 三方登录方式
 */
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { msg } from '@/common';
import { px2dp } from '@/styles';

const AgreementBox = ({ articlesList, textStyle }) => {
  return (
    <View style={styles.container}>
      {articlesList.length > 0 && (
        <Text style={[styles.text1, textStyle]}>
          登录注册即视为同意
          {articlesList.map((item, index) => {
            if (!item || JSON.stringify(item) === '{}') return;
            return (
              <React.Fragment key={`articlesList${index}`}>
                <Text
                  style={styles.text2}
                  onPress={() => {
                    msg.emit('router: goToNext', {
                      routeName: 'CustAgreement',
                      title: item.title,
                      content: item.content
                    });
                  }}
                >
                  {`《${item.title}》`}
                </Text>
                {articlesList.length - 1 != index ? (
                  <Text style={styles.text1}>、</Text>
                ) : null}
                {articlesList.length - 2 === index ? (
                  <Text style={styles.text1}>及</Text>
                ) : null}
              </React.Fragment>
            );
          })}
        </Text>
      )}
    </View>
  );
};
export default AgreementBox;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    marginBottom: px2dp(80),
    color: '#999796',
    marginHorizontal: px2dp(64)
  },
  check: {
    width: px2dp(32),
    height: px2dp(32),
    top: px2dp(4),
    marginRight: px2dp(10),
  },
  text1: {
    color: '#666564',
    fontSize: px2dp(24),
    lineHeight: px2dp(36),
  },
  text2: {
    color: '#BA914A',
    fontSize: px2dp(24),
  },
});
